<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
border: 1px solid gray;
width: 520px;
height: 500px;
margin: 0 auto;
position: relative;
}
.title{
    margin: 0 auto;
    margin-top: 30px;
width: 100px;
}
.userInfo{
width: 460px;
height: 91px;
position: relative;
margin-top: 10px;
margin-left: 5px;;
}
.sp{
font-weight: bolder;
font-size: 17px;
}
u{
    height: 10px;
}
.body{
    width: 460px;
margin-left: 7px;
min-height:200px;
}
table{
    width: 400px;
    position: relative;
    left: 40px;
    top: -10px;
}
.pu{
    width: 33px;
  height: 24px;
  border-radius: 50% / 50%;
  text-align: center;
  border: 1px solid gray;
  font-weight: bold;
 position: absolute;
  left: 315px;
  top: 20px;
}
</style>
</head>
<body>
  <div class="box">
        <div class="pu">普</div>
  <h2 class="title">处方笺</h2>

  <div class="userInfo">
    <span class="sp">姓名:</span>&nbsp;<span class="userName"><u>王宝强</u></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span class="sp">年龄:</span>&nbsp;<span class="userAge"><u>90</u></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span class="sp">性别:</span>&nbsp;<span class="userSex"><u>男</u></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span class="sp">日期:</span>&nbsp;<span class="userSex"><u>2019.12.30</u></span><br><br>
    <span class="sp">初始诊断:</span>&nbsp;<span class="userSex"><u>大幅广告和国防建设豆腐干山豆根的官方的</u></span>
  </div>
  <hr style="height:1px;border:0.5px solid gray;" />
  <div class="body">
        <span style="font-weight: bolder;font-size: 37px;">R</span>
<table>
    <tr>
        <td>甘草</td>
        <td>5</td>
        <td>克</td>
    </tr>
    <tr>
        <td>牛皇姐图片</td>
        <td>2</td>
        <td>袋</td>
    </tr>
    <tr>
            <td>感冒灵颗粒</td>
            <td>20</td>
            <td>袋</td>
        </tr>
</table>
  </div>
  <hr style="height:1px;border:0.5px solid gray;" />
  <div class="userInfo">
    <span class="sp">医生:</span>&nbsp;<span class="userName">王宝强</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span class="sp">药剂调配人:</span>&nbsp;<span class="userAge">王宝强</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span class="sp">药剂核对:</span>&nbsp;<span class="userSex">王宝强</span>
  </div>
  </div>
</body>
</html>